<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        < Fantastic Studios />
    </title>
    <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
    <link rel="stylesheet" href="compact-gallery.css">
    <link rel="stylesheet" href="horizontal.css">
    <!-- Optional seperate css files -->
    <!-- <link rel="stylesheet" href="hero-img.css"> -->
    <!-- <link rel="stylesheet" href="cards-gallery.css">
    <link rel="stylesheet" href="grid-gallery.css"> -->

</head>

<body>
    <nav class="navbar navbar-expand-md bg-secondary navbar-dark sticky-top">
        <!-- Brand -->
        <a class="navbar-brand nav-link" href="#top">
            < Photo Gallery />
        </a>

        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#fluid-gallery">Fluid Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#card-gallery">Card Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#grid-gallery">Grid Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#horizontal-scrolling">Horizontal Scrolling</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#slider">Image slider</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#cssGrid">Image Grid</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#horizontal-scrolling-footer">Horizontal Scrolling Footer</a>
                </li>
                
            </ul>
        </div>
    </nav>

    <!-- optional hero image  -->

<!--     <div class="hero-image">
        <img class="img-fluid" src="https://source.unsplash.com/1600x900/?profile,Photographer" alt="Photographer">
        <div class="hero-text">
            <p>Your Photography Studios</p>
            mailto:
            <button id="mailto">
                <a href="mailto:photographyStudios@yourStudioName.net?Subject=Photography%Appointments" target="_top">
                    < Appointments />
                </a>
            </button>
        </div>
    </div> -->

    <!-- COMPACT EASE IN-OUT GALLERY -->
    <a name="fluid-gallery"></a>
    <section class="gallery-block compact-gallery">
        <div class="container">
            <div class="heading">
                <h2>
                    < Fluid Gallery />
                </h2>
                <hr class="hr">
            </div>
            <div class="row no-gutters">
                <div class="col-md-6 col-lg-4 item zoom-on-hover">
                    <a class="lightbox" href="img/dock.jpg">
                        <img class="img-fluid image" src="img/dock.jpg">
                        <span class="description">
                            <span class="description-heading">Lorem Ipsum</span>
                            <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit
                                amet, consectetur adipiscing elit.</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4 item zoom-on-hover">
                    <a class="lightbox" href="img/natur.jpg">
                        <img class="img-fluid image" src="img/natur.jpg">
                        <span class="description">
                            <span class="description-heading">Lorem Ipsum</span>
                            <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit
                                amet, consectetur adipiscing elit.</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4 item zoom-on-hover">
                    <a class="lightbox" href="img/guy.jpg">
                        <img class="img-fluid image" src="img/guy.jpg">
                        <span class="description">
                            <span class="description-heading">Lorem Ipsum</span>
                            <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit
                                amet, consectetur adipiscing elit.</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4 item zoom-on-hover">
                    <a class="lightbox" href="img/nature.jpg">
                        <img class="img-fluid image" src="img/nature.jpg">
                        <span class="description">
                            <span class="description-heading">Lorem Ipsum</span>
                            <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit
                                amet, consectetur adipiscing elit.</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4 item zoom-on-hover">
                    <a class="lightbox" href="img/lion.jpg">
                        <img class="img-fluid image" src="img/lion.jpg">
                        <span class="description">
                            <span class="description-heading">Lorem Ipsum</span>
                            <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit
                                amet, consectetur adipiscing elit.</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4 item zoom-on-hover">
                    <a class="lightbox" href="img/spance.jpg">
                        <img class="img-fluid image" src="img/spance.jpg">
                        <span class="description">
                            <span class="description-heading">Lorem Ipsum</span>
                            <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit
                                amet, consectetur adipiscing elit.</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4 item zoom-on-hover">
                    <a class="lightbox" href="img/forest.jpg">
                        <img class="img-fluid image" src="img/forest.jpg">
                        <span class="description">
                            <span class="description-heading">Lorem Ipsum</span>
                            <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit
                                amet, consectetur adipiscing elit.</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4 item zoom-on-hover">
                    <a class="lightbox" href="img/tree.jpg">
                        <img class="img-fluid image" src="img/tree.jpg">
                        <span class="description">
                            <span class="description-heading">Lorem Ipsum</span>
                            <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit
                                amet, consectetur adipiscing elit.</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4 item zoom-on-hover">
                    <a class="lightbox" href="img/water.jpg">
                        <img class="img-fluid image" src="img/water.jpg">
                        <span class="description">
                            <span class="description-heading">Lorem Ipsum</span>
                            <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit
                                amet, consectetur adipiscing elit.</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>



        <!-- CARD GALLERY -->
        <a name="card-gallery"></a>
        <section class="gallery-block cards-gallery">
            <div class="container">
                <div class="heading">
                    <h2>
                        < Cards Gallery />
                    </h2>
                    <hr class="hr">
                </div>
                <div class="row">
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 transform-on-hover">
                            <a class="lightbox" href="img/dock.jpg">
                                <img src="img/dock.jpg" alt="Card Image" class="card-img-top">
                            </a>
                            <div class="card-body">
                                <h6>
                                    <a href="#">Lorem Ipsum</a>
                                </h6>
                                <p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 transform-on-hover">
                            <a class="lightbox" href="img/spance.jpg">
                                <img src="img/spance.jpg" alt="Card Image" class="card-img-top">
                            </a>
                            <div class="card-body">
                                <h6>
                                    <a href="#">Lorem Ipsum</a>
                                </h6>
                                <p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 transform-on-hover">
                            <a class="lightbox" href="img/forest.jpg">
                                <img src="img/forest.jpg" alt="Card Image" class="card-img-top">
                            </a>
                            <div class="card-body">
                                <h6>
                                    <a href="#">Lorem Ipsum</a>
                                </h6>
                                <p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 transform-on-hover">
                            <a class="lightbox" href="img/nature.jpg">
                                <img src="img/nature.jpg" alt="Card Image" class="card-img-top">
                            </a>
                            <div class="card-body">
                                <h6>
                                    <a href="#">Lorem Ipsum</a>
                                </h6>
                                <p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 transform-on-hover">
                            <a class="lightbox" href="img/guy.jpg">
                                <img src="img/guy.jpg" alt="Card Image" class="card-img-top">
                            </a>
                            <div class="card-body">
                                <h6>
                                    <a href="#">Lorem Ipsum</a>
                                </h6>
                                <p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 transform-on-hover">
                            <a class="lightbox" href="img/natur.jpg">
                                <img src="img/natur.jpg" alt="Card Image" class="card-img-top">
                            </a>
                            <div class="card-body">
                                <h6>
                                    <a href="#">Lorem Ipsum</a>
                                </h6>
                                <p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 transform-on-hover">
                            <a class="lightbox" href="img/road.jpg">
                                <img src="img/road.jpg" alt="Card Image" class="card-img-top">
                            </a>
                            <div class="card-body">
                                <h6>
                                    <a href="#">Lorem Ipsum</a>
                                </h6>
                                <p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 transform-on-hover">
                            <a class="lightbox" href="img/lion.jpg">
                                <img src="img/lion.jpg" alt="Card Image" class="card-img-top">
                            </a>
                            <div class="card-body">
                                <h6>
                                    <a href="#">Lorem Ipsum</a>
                                </h6>
                                <p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 transform-on-hover">
                            <a class="lightbox" href="img/water.jpg">
                                <img src="img/water.jpg" alt="Card Image" class="card-img-top">
                            </a>
                            <div class="card-body">
                                <h6>
                                    <a href="#">Lorem Ipsum</a>
                                </h6>
                                <p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Grid GALLERY -->
            <a name="grid-gallery"></a>
            <section id="grid-padding" class="gallery-block grid-gallery">
                <div class="container">
                    <div class="heading">
                        <h2>
                            < Grid Gallery />
                        </h2>
                        <hr class="hr">
                    </div>
                    <div  id="row-1" class="row">
                        <div id="grid-pics" class="col-md-6 col-lg-4 item">
                            <a class="lightbox" href="img/dock.jpg">
                                <img class="img-fluid image scale-on-hover" src="img/dock.jpg">
                            </a>
                        </div>
                        <div id="grid-pics" class="col-md-6 col-lg-4 item">
                            <a class="lightbox" href="img/water.jpg">
                                <img class="img-fluid image scale-on-hover" src="img/water.jpg">
                            </a>
                        </div>
                        <div  id="grid-pics"class="col-md-6 col-lg-4 item">
                            <a class="lightbox" href="img/spance.jpg">
                                <img class="img-fluid image scale-on-hover" src="img/spance.jpg">
                            </a>
                        </div>
                        <div  id="grid-pics" class="col-md-6 col-lg-4 item">
                            <a class="lightbox" href="img/tree.jpg">
                                <img class="img-fluid image scale-on-hover" src="img/tree.jpg">
                            </a>
                        </div>
                        <div id="grid-pics" class="col-md-6 col-lg-4 item">
                            <a class="lightbox" href="img/forest.jpg">
                                <img class="img-fluid image scale-on-hover" src="img/forest.jpg">
                            </a>
                        </div>
                        <div  id="grid-pics"class="col-md-6 col-lg-4 item">
                            <a class="lightbox" href="img/lion.jpg">
                                <img class="img-fluid image scale-on-hover" src="img/lion.jpg">
                            </a>
                        </div>
                        <div id="grid-pics" class="col-md-6 col-lg-4 item">
                            <a class="lightbox" href="img/guy.jpg">
                                <img class="img-fluid image scale-on-hover" src="img/guy.jpg">
                            </a>
                        </div>
                        <div id="grid-pics" class="col-md-6 col-lg-4 item">
                            <a class="lightbox" href="img/nature.jpg">
                                <img class="img-fluid image scale-on-hover" src="img/nature.jpg">
                            </a>
                        </div>
                        <div  id="grid-pics"class="col-md-6 col-lg-4 item">
                            <a class="lightbox" href="img/natur.jpg">
                                <img class="img-fluid image scale-on-hover" src="img/natur.jpg">
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </section>

        <hr class="hr">
        <!-- HORIZONTAL SCROLLING  -->
        <a name="horizontal-scrolling"></a>
        <h2>
            < Horizontal Scrolling />
        </h2>
        <div id="scroll">
            <img src="img/lion.jpg">
            <img src="img/forest.jpg">
            <img src="img/dock.jpg">
            <img src="img/natur.jpg">
            <img src="img/nature.jpg">
            <img src="img/road.jpg">
            <img src="img/spance.jpg">
            <img src="img/tree.jpg">
            <img src="img/water.jpg">
            <img src="img/guy.jpg">
        </div>
    </section>
    <hr class="hr">
    <a name="slider"></a>
    <h2>
        < Bootstrap 4 carousel slider />
    </h2>
    <!-- Bootstrap 4 carousel slider -->
    <div id="carouselExampleFade" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class=" bs-slider d-block w-100" src="img/dock.jpg" alt="Lake and dock for fishing"     height="">
            </div>
            <div class="carousel-item">
                <img class=" bs-slider d-block w-100 " src="img/forest.jpg" alt="forrest and moss" height="">
            </div>
            <div class="carousel-item">
                <img class=" bs-slider d-block w-100 " src="img/water.jpg" alt="water picture">
            </div>
            <div class="carousel-item">
                <img class=" bs-slider d-block w-100 " src="img/lion.jpg" alt="roaring lion">
            </div>
            <div class="carousel-item">
                <img class=" bs-slider d-block w-100 " src="img/guy.jpg" alt="astronaut in space">
            </div>
            <div class="carousel-item">
                <img class=" bs-slider d-block w-100 " src="img/natur.jpg" alt="Nature">
            </div>
            <div class="carousel-item">
                <img class=" bs-slider d-block w-100 " src="img/nature.jpg" alt="nature">
            </div>
            <div class="carousel-item">
                <img class=" bs-slider d-block w-100" src="img/tree.jpg" alt="tree and nature">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
<br>
    <!-- CSS IMAGE GRID LAYOUT -->
             <h2>
                 < Grid Gallery with text />
            </h2>
    <hr class="hr">
    <a name="cssGrid"></a>
    <div class="grid-1">
        <div class="grid-item-1">
            <img class="img-2" src="img/tree.jpg">

            <hr class="hr-2">

        <p id="p1">
      In quis quam feugiat, mollis eros quis, fringilla eros. Duis suscipit a mi sit amet sagittis. Curabitur eu mollis risus. Aliquam lacus eros, faucibus sed impend mollis.
                
            </p>
        </div>

        <div class="grid-item-1">
            <img class="img-2" src="img/guy.jpg">

            <hr class="hr-2">

            <p id="p1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt tellus a sem scelerisque vestibulum in eu lacus. Vivamus vitae eros augue.
            </p>
        </div>

        <div class="grid-item-1">
            <img class="img-2" src="img/nature.jpg">

        <hr class="hr-2">

            <p id="p1">
                 Aenean est eros, auctor ac elementum id, laoreet eu sapien.
            </p>
        </div>

        <div class="grid-item-1">
            <img class="img-2" src="img/spance.jpg">

            <hr class="hr-2">

            <p id="p1">
                 Donec elementum lacus at neque imperdiet blandit. Morbi feugiat odio id nulla bibendum sodales. Integer eros elit, volutpat id aliquet et, commodo ut odio.
            </p>
        </div>

        <div class="grid-item-1">
            <img class="img-2" src="img/water.jpg">

            <hr class="hr-2">

            <p id="p1">
                Proin ut nulla ut augue rhoncus finibus ac non quam. Fusce et lacinia urna. Vivamus pellentesque ipsum quis leo sodales finibus. 
            </p>
        </div>

        <div class="grid-item-1">
            <img class="img-2" src="img/natur.jpg">

            <hr class="hr-2">

            <p id="p1">
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sed arcu dui. Ut ac urna turpis. Praesent risus dui, eleifend tempus sagittis ut, luctus sed ligula. Fusce in enim felis. Sed nisl purus, porta vitae dolor in, tincidunt laoreet felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec rhoncus risus fringilla arcu pulvinar, eu porta turpis porta. Suspendisse eget euismod urna. 
            </p>
        </div>

        <div class="grid-item-1">
            <img class="img-2" src="img/road.jpg">

        <hr class="hr-2">

            <p id="p1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt tellus a sem scelerisque vestibulum in eu lacus. Vivamus vitae eros augue.
            </p>
        </div>

  <div class="grid-item-1">
            <img class="img-2" src="img/lion.jpg">

            <hr class="hr-2">

            <p id="p1">
                 Donec elementum lacus at neque imperdiet blandit. Morbi feugiat odio id nulla bibendum sodales. Integer eros elit, volutpat id aliquet et, commodo ut odio.
            </p>
        </div>

        <div class="grid-item-1">
            <img class="img-2" src="img/forest.jpg">

            <hr class="hr-2">

            <p id="p1">
                Proin ut nulla ut augue rhoncus finibus ac non quam. Fusce et lacinia urna. Vivamus pellentesque ipsum quis leo sodales finibus. 
            </p>
        </div>

        <div class="grid-item-1">
            <img class="img-2" src="img/dock.jpg">

            <hr class="hr-2">

            <p id="p1">
                Proin varius ante dolor, quis maximus nisl dapibus at. Integer dapibus mi accumsan, fringilla massa sit amet, fringilla augue. Nullam tempus lobortis malesuada. Aenean placerat varius condimentum. Nulla faucibus pulvinar lacus, ut auctor metus pulvinar et. Etiam ultrices semper nisl quis tincidunt. 
            </p>
        </div>
    </div>
    <!-- contact/email form submission  -->
    <a name="contact"></a>
    <section class="contact-from pt-4">
        <div class="container">
                        <div class="row">
                            <div class="col-md-6 mx-auto text-center">
                                <h2>Contact us?</h2>
                                <div class="divider bg-primary mx-auto"></div>
                                <p class="text-muted lead">
                                   We are looking forward to hear something from you!
                                </p>
                            </div>
                        </div>
                        <div class="row mt-5">
                            <div class="col-md-8 mx-auto">
                                <form _lpchecked="1">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="Your name">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="email" class="form-control" placeholder="Your email address">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="tel" class="form-control" placeholder="Phone number">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="url" class="form-control" placeholder="Your website">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <textarea rows="5" class="form-control" placeholder="What are you looking for?"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center mt-3">
                                        <button class="btn btn-primary">Send your quote</button>
                                        <br><br>
                                        <button type="submit" class="text-white btn btn-primary" id="mailto">
                                            <a class="text-white" href="mailto:photographyStudios@yourStudioName.net?Subject=Photography%Appointments"
                                                target="_top">
                                                Direct Email <i class="text-white far fa-envelope"></i>
                                            </a>
                                        </button>
                                    </div>
                                    
                                </form>
                            </div>
                        </div>
                    </div>
          </div>

          <hr class="hr">
        <!-- HORIZONTAL SCROLLING  -->
        <a name="horizontal-scrolling-footer"></a>
        <h2>
            < Horizontal Scrolling />
        </h2>
        <div id="scroll">
            <img src="img/lion.jpg">
            <img src="img/forest.jpg">
            <img src="img/dock.jpg">
            <img src="img/natur.jpg">
            <img src="img/nature.jpg">
            <img src="img/road.jpg">
            <img src="img/spance.jpg">
            <img src="img/tree.jpg">
            <img src="img/water.jpg">
            <img src="img/guy.jpg">
        </div>
   
<!-- ABOUT ME SECTION -->
    <div class="about-page">
        <h2>About my Photography Journey</h2>
        <p id="about-me">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident cum alias laudantium officiis hic fuga laboriosam
            beatae aperiam distinctio dolores nesciunt excepturi molestiae labore porro maiores fugiat, aliquid natus quisquam.
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique harum minima commodi id dolorem, nulla possimus
             molestias sunt magni. Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, assumenda pariatur hic, eligendi quae odio vel corrupti repudiandae doloribus doloremque veniam magni aut soluta! Eveniet iste temporibus eaque quae dicta.</p>
    </div>
<!-- HORIZONTAL SCROLLING  -->
<a name="horizontal-scrolling-footer"></a>
<h2>
    < Horizontal Scrolling />
</h2>
<div id="scroll">
    <img src="img/lion.jpg">
    <img src="img/forest.jpg">
    <img src="img/dock.jpg">
    <img src="img/natur.jpg">
    <img src="img/nature.jpg">
    <img src="img/road.jpg">
    <img src="img/spance.jpg">
    <img src="img/tree.jpg">
    <img src="img/water.jpg">
    <img src="img/guy.jpg">
</div>
    <footer>
        &copy; MIT License Chase Singhofen 2018 Photo Gallery
        <a href="#top">Go to top</a>
    </footer>


    <!-- BS4 JQUERY AND POPPER.js CDN's -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>

    <!-- local script file  -->
    <script>
        baguetteBox.run('.compact-gallery', { animation: 'slideIn' });

    </script>

</body>

</html>
